<div class="sidebar-background">
  <div class="primary-sidebar-background"></div>
</div>

<div class="primary-sidebar">

  <!-- Main nav -->
  <ul class="nav nav-collapse collapse nav-collapse-primary">

    <% menu.each do |primary, primary_options| %>

        <% if primary_options[:items].keys.count > 1 %>

            <li class="dark-nav <%= nav_active(primary: primary.to_s) %>">

              <span class="glow"></span>

              <% id = random_string %>

              <% link_to "##{id}", class:"accordion-toggle #{nav_collapse(primary: primary.to_s)} ", "data-toggle" => "collapse" do %>
                  <i class="<%= primary_options[:primary][:icon] %> icon-2x"></i>
                    <span>
                      <%= primary_options[:primary][:label] %>
                      <i class="icon-caret-down"></i>
                    </span>

              <% end %>

              <ul id="<%= "#{id}" %>" class="collapse <%= "in" if nav_collapse(primary: primary.to_s) != "collapsed" %>">
                <% primary_options[:items].each do |secondary, secondary_options| %>
                    <li class="<%= nav_active(secondary: secondary.to_s) %>">
                      <% link_to "/pages/#{primary}/#{secondary}.html", relative: true do %>
                          <i class="<%= secondary_options[:icon]%>"></i> <%= secondary_options[:label] %>
                      <% end %>
                    </li>
                <% end %>
              </ul>

            </li>

        <% else %>

            <li class="<%= nav_active(primary: primary.to_s) %>">
              <span class="glow"></span>
              <% link_to "/pages/#{primary}/#{primary_options[:primary][:link]}.html", relative: true do %>
                  <i class="<%= primary_options[:primary][:icon] %> icon-2x"></i>
                  <span><%= primary_options[:primary][:label] %></span>
              <% end %>
            </li>

        <% end %>

    <% end %>

  </ul>

  <div class="hidden-tablet hidden-phone">
    <div class="text-center" style="margin-top: 60px">
      <div class="easy-pie-chart-percent" style="display: inline-block" data-percent="89"><span>89%</span></div>
      <div style="padding-top: 20px"><b>CPU Usage</b></div>
    </div>

    <hr class="divider" style="margin-top: 60px">

    <div class="sparkline-box side">

      <div class="sparkline-row">
        <h4 class="gray"><span>Orders</span> 847</h4>
        <div class="sparkline big" data-color="gray"><!--<%= random_numbers(12).join(",") %>--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="dark-green"><span>Income</span> $43.330</h4>
        <div class="sparkline big" data-color="darkGreen"><!--<%= random_numbers(12).join(",") %>--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="blue"><span>Reviews</span> 223</h4>
        <div class="sparkline big" data-color="blue"><!--<%= random_numbers(12).join(",") %>--></div>
      </div>

      <hr class="divider">
    </div>
  </div>


</div>